<!-- =======================================================
  * Author: Jéssica Yang
  ======================================================== -->

<template>
  <div>
    <!--搜索用户筛选表单-->
    <el-form :inline="true">
      <!--用户名搜索输入框-->
      <el-form-item prop="searchName">
        <el-input v-model="username" suffix-icon="el-icon-search" placeholder="请输入用户名" clearable></el-input>
      </el-form-item>
      <el-form-item >
        <!--搜索按钮-->
        <el-button type="primary" icon="el-icon-search" @click="load">搜索</el-button>
        <!--新增用户按钮-->
        <el-button type="primary" icon="el-icon-plus" @click="add">新增用户</el-button>
      </el-form-item>
    </el-form>

    <!--用户列表表格-->
    <el-table :data="tableData" :max-height="tableHeight">
      <!--表头-->
      <el-table-column type="index" width="40" align="center"></el-table-column>
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="medicalorg" label="医疗机构" align="center"></el-table-column>
      <el-table-column prop="email" label="邮箱" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <div class="operation_show" slot-scope="scope">
          <!--对当前行进行编辑操作按钮-->
          <el-button type="success" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
          <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="del(scope.row.id)"
          >
            <!--删除当前行按钮-->
            <el-button type="danger" icon="el-icon-delete" slot="reference" style="margin-left:10px">删除</el-button>
          </el-popconfirm>
        </div>
      </el-table-column>
    </el-table>

    <!--分页块-->
    <div>
      <el-pagination
          style="margin-top: 10px"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[10,20,30,40,50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!--新增用户信息对话框-->
    <el-dialog title="用户信息" :visible.sync="addFormVisible" width="30%">
      <!--新增用户信息表单-->
      <el-form label-width="100px">
        <!--用户名输入框-->
        <el-form-item label="用户名：">
          <el-input v-model="addForm.username" placeholder="请输入用户名" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--密码输入框-->
        <el-form-item label="密码：">
          <el-input v-model="addForm.password" placeholder="请输入用户密码" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--用户昵称输入框-->
        <el-form-item label="昵称：">
          <el-input v-model="addForm.nickname" placeholder="请输入用户昵称" clearable auto-complete="off"></el-input>
        </el-form-item>
        <!--用户所属医疗机构输入框-->
        <el-form-item label="医疗机构：">
          <el-input v-model="addForm.medicalorg" placeholder="请输入用户的医疗机构" clearable auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="addForm.email" placeholder="请输入用户的邮箱" clearable auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--新增用户信息对话框按钮-->
      <div slot="footer" class="dialog_footer">
        <!--关闭对话框按钮-->
        <el-button @click="addFormVisible = false" type="danger">取消</el-button>
        <!--保存信息按钮-->
        <el-button type="primary" @click="saveAdd">保存</el-button>
      </div>
    </el-dialog>

    <!--编辑用户信息对话框-->
    <el-dialog title="用户信息" :visible.sync="editFormVisible" width="30%">
      <!--编辑用户信息表单-->
      <el-form label-width="120px">
        <!--用户名输入框-->
        <el-form-item label="修改用户名：">
          <el-input v-model="editForm.username" placeholder="请输入用户名" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--密码输入框-->
        <el-form-item label="修改密码：">
          <el-input v-model="editForm.password" placeholder="请输入用户密码" clearable autocomplete="off"></el-input>
        </el-form-item>
        <!--用户昵称输入框-->
        <el-form-item label="修改昵称：">
          <el-input v-model="editForm.nickname" placeholder="请输入用户昵称" clearable auto-complete="off"></el-input>
        </el-form-item>
        <!--用户所属医疗机构输入框-->
        <el-form-item label="修改医疗机构：">
          <el-input v-model="editForm.medicalorg" placeholder="请输入用户的医疗机构" clearable auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="修改邮箱：">
          <el-input v-model="editForm.email" placeholder="请输入用户的医疗机构" clearable auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--编辑用户信息对话框按钮-->
      <div slot="footer" class="dialog_footer">
        <!--关闭对话框按钮-->
        <el-button @click="editFormVisible = false" type="danger">取消</el-button>
        <!--保存信息按钮-->
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserList",
  data(){
    return{
      currentPage:1,
      tableData:[],
      total:0,
      pagenum:1,
      pagesize:10,
      username:"",
      addFormVisible:false,
      addForm:{},
      editFormVisible:false,
      editForm:{},
      tableHeight:"",
    }
  },
  created() {
    this.load(); //网页创建时加载数据
    this.getTableHeight(); //网页创建时获得表格高度
  },
  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  methods:{
    //搜索或刷新功能
    load(){
      this.request.get("/user/findAll/" + this.pagenum + "/" + this.pagesize + "/" + this.username)
          .then(res=>{
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          })
    },

    //分页查询
    handleSizeChange(pagesize) {   //每页条数改变时触发
      console.log(pagesize)
      this.pagesize = pagesize
      this.load()
    },
    handleCurrentChange(pagenum) {   //当前页码改变时触发
      console.log(pagenum)
      this.pagenum = pagenum
      this.load()
    },

    //显示新增用户信息表单对话框
    add(){
      this.addForm = {}  //每次打开新增用户对话框时清空表单数据，这样不会保留上次填写时留下的数据
      this.addFormVisible = true  //显示新增用户信息表单对话框
    },

    //显示编辑用户信息表单对话框
    edit(row){
      //打开编辑用户信息对话框时传当前数据给表单但不显示
      // this.editForm = row 这个是浅拷贝，如果用这个方法还没点确定或取消时就会改变表格的数据，但是浏览器并没有发出请求 是回显数据的时候直接修改了数据，所以不能用浅拷贝
      this.editForm = JSON.parse(JSON.stringify(row))  //用JSON进行深拷贝，这样还未发起请求的时候浏览器不会修改表格里的数据
      this.editForm.username = ""
      this.editForm.password = ""
      this.editForm.nickname = ""
      this.editForm.medicalorg = ""
      this.editForm.email = ""
      //显示编辑用户信息表单对话框
      this.editFormVisible = true
    },

    //新增功能
    saveAdd() {
      this.request.post("/user/register",this.addForm).then(res =>{
        if(res.data.code === '200'){
          this.$message.success("保存成功")
          this.addFormVisible = false
          this.load()
        }else if(res.data.code === '400'){
          this.$message.error("请完成表单")
        }
        else if (res.data.code === '-1'){
          this.$message.error(res.data.msg)
        }
        else{
          this.$message.error("保存失败")
        }
      })
    },

    //编辑功能
    saveEdit() {
      this.request.post("/user/edit",this.editForm).then(res =>{
        if(res.data.code === '200'){
          this.$message.success("保存成功")
          this.editFormVisible = false
          this.load()
        }else if (res.data.code === '-1'){
          this.$message.error(res.data.msg)
        }
        else{
          this.$message.error("保存失败")
        }
      })
    },

    //删除用户功能
    del(id){
      this.request.delete("/user/delete/" + id).then(res =>{
        if(res.data.code === '200'){
          this.$message.success("删除成功")
          this.load()
        }else{
          this.$message.error("删除失败")
        }
      })
    },

    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 206; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    }
  }
}
</script>

<style scoped>

/*将表格操作列设为光标停留时显示*/
.operation_show{
  display: none;
}
.el-table__body tr:hover > td .operation_show{
  display: block;
}

</style>